<!doctype html>
<head>
  <title>CodeMirror: Code Folding Demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../doc/docs.css">

  <style>
    .some-css {
      color: red;
      line-height: 2;
    }
  </style>

  <link rel="stylesheet" href="../lib/codemirror.css">
  <link rel="stylesheet" href="../addon/fold/foldgutter.css">
  <link rel="stylesheet" href="../theme/erlang-dark.css">
  <script src="../lib/codemirror.js"></script>
  <script src="../addon/fold/foldcode.js"></script>
  <script src="../addon/fold/foldgutter.js"></script>
  <script src="../addon/fold/brace-fold.js"></script>
  <script src="../addon/fold/xml-fold.js"></script>
  <script src="../addon/fold/indent-fold.js"></script>
  <script src="../addon/fold/comment-fold.js"></script>
  <script src="../mode/javascript/javascript.js"></script>
  <script src="../mode/xml/xml.js"></script>
  <script src="../mode/css/css.js"></script>
  <script src="../mode/htmlmixed/htmlmixed.js"></script>
  <style>
    .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  </style>
</head>
<body>

  
    <div id="code"></div>
    <button onclick="tml()">获取Html</button>
    <script>
      
      var  editor = CodeMirror(document.getElementById("code"), {
          mode: "text/html",
          theme:"erlang-dark",
          lineNumbers: true,	//显示行号     
          lineWrapping: true, //代码折叠      
          foldGutter: true,    
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],   
          matchBrackets: true,  //括号匹配
          extraKeys: {"Ctrl-Space": "autocomplete"},
          value: document.documentElement.innerHTML
        });
        
    
      function tml(){
        console.log(editor.getValue());
      }
    </script>
  </article>
</body>
